<template>
  <div>
    <h1>{{ msg }},{{ name }}</h1>
    <!-- 1：通过props父组件传递给子组件函数，实现子给父传数据 -->
    <School :getSchoolName="getSchoolName" />

    <!-- 2：给组件的VC实例绑定一个自定义事件（可简写@），通过子组件触发！实现子给父传数据 -->
    <!-- 可以添加控制，调用一次 -->
    <!-- <Student @atguigu="getStudentName" @demo="m1" /> -->

    <!-- 3：ref指定组件，在挂载完毕后手动给组件绑定自定义事件，灵活性强！ -->
    <!-- 这种方式灵活性很高，例如延迟绑定，或调用接口后再绑定，第二种方式无法实现 -->
    <!-- <Student ref="student"></Student> -->

    <!-- 标签中的默认都为自定义事件，需要通过$emit调用触发 -->
    <!-- 而对于原生的dom操作，例如点击、键盘事件等，需加【native】才能识别触发（仅调用者使用） -->
    <Student ref="student" @click.native="show"></Student>
  </div>
</template>

<script>
//当引入的组件含有相同样式名时，后来的会进行覆盖，显示最后面的
import School from "./components/School.vue";
import Student from "./components/Student.vue";

export default {
  name: "App",
  components: {
    School,
    Student,
  },
  data() {
    return {
      msg: "你好啊",
      name: "",
    };
  },
  methods: {
    getSchoolName(schoolName) {
      console.log("App收到了学校名:" + schoolName);
    },

    //1：可以接收多个参数，往后扩展即可
    // getStudentName(studentName, x, y, z) {
    //   console.log("App收到了学生名:" + studentName, x, y, z);
    // },

    //2：开发中可传递对象，或使用ES6语法，接收一个参数，后面的全部放入一个数组汇总
    getStudentName(studentName, ...param) {
      console.log("App收到了学生名:" + studentName, param);
      this.name = studentName;
    },

    m1() {
      console.log("demo被触发了,测试多个自定义事件");
    },
    show() {
      alert("原生dom事件触发");
    },
  },
  mounted() {
    //1：获取refs下的student名称的组件VC实例
    //2：$on绑定自定义事件，第一个参数事件名，第二个参数是触发时的回调   可添加$once修饰调用一次
    //this.$refs.student.$on("atguigu", this.getStudentName);

    //3：延迟绑定，模拟调用接口处理
    // setTimeout(() => {
    //   this.$refs.student.$on("atguigu", this.getStudentName);
    // }, 3000);

    //console.log("————————————————————————————————————————")
    //console.log("————————————————————————————————————————")

    //重点问题一：直接在触发事件后，执行业务逻辑，这里有坑
    // this.$refs.student.$on("atguigu", function (studentName, ...param) {
    //   console.log("App收到了学生名:" + studentName, param);
    //   //！！！注意，谁触发的事件，this就执行谁，这里的this是VC子组件，所以App页面没赋值展示
    //   this.name = studentName;
    // });

    //针对上述问题，这里只有两种方式解决
    //第一种，使用原先的方法回调，vue中methods定义的方法会优先覆盖执行，所以不会找不到
    //第二种，使用箭头函数（没有this），会向外层查找this，mounted的this是VM，最终会成功赋值展示
    this.$refs.student.$on("atguigu", (studentName, ...param) => {
      console.log("App收到了学生名:" + studentName, param);
      this.name = studentName;
    });
  },
};
</script>

<style>
.title {
  color: aqua;
  padding: 5px;
}
</style>
